<template>
        <div class="operation-options" @click.stop>
            <ul>
                <li v-for="item in list" :key="item.value">
                    <el-tooltip
                        v-if="!!item.desc"
                        effect="dark"
                        :content="item.desc"
                        :placement="placement|| item.placement ||'right'"
                    >
                        <span @click="handleSelect(item)" class="options-item" :class="{active: modelValue==item.value, subscript: item.hasChild}">
                            <svg-icon :name="item.icon" size="18px" />
                        </span>
                    </el-tooltip>
                    <span v-else @click="handleSelect(item)" class="options-item" :class="{active: modelValue==item.value, subscript: item.hasChild}">
                        <svg-icon :name="item.icon" size="18px" />
                    </span>
                </li>
            </ul>
        </div>
</template>
  
<script setup lang="ts">
import { defineEmits, ref, toRef, watch, onMounted, onUnmounted } from 'vue';
import { useRoute } from 'vue-router';
import type { OperationOptions } from '@/types/Design';

interface Props {
	list: OperationOptions[];
    modelValue: string | null;
    placement?: string;
}

defineProps<Props>();
const emit = defineEmits<{
    'update:modelValue': [value: string],
    'select': [value: any],
}>()

function handleSelect(item){
    emit('update:modelValue', item.value);
    emit('select', item)
}

</script>

<style lang="scss" scoped>
@import '@/style/common.scss';
@mixin active{
    background-color: var(--el-color-primary);
    color: white;
}
.operation-options{
    width: 40px;
    padding: 5px;
    min-height: 100px;
    background-color: white;
    li{
        padding: 8px 0;
        border-bottom: 1px solid var(--border-color);
        color: var(--el-text-color-regular);
       
        .options-item{
            display: block;
            padding: 2px;
            cursor: pointer;
            text-align: center;
            overflow: hidden;
            &.active{
                @include active;
                &:hover{
                    @include active;
                }
            }
            &:hover{
                @include active;
                background-color: var(--el-color-primary-light-5);
            }
            &.subscript{
                position: relative;
                
                &::after{
                    content: '';
                    @include triangle(16px,8px,var(--el-color-primary-light-5),up);
                    position: absolute;
                    bottom: 0;
                    right: -8px;
                    transform: rotate(0deg);
                }
            }
        }
        &:last-of-type{
            border-bottom: none;
        }
    }
}
</style>